<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>Files app Labs</title>
  <meta name="google" value="notranslate">
  <meta name="color-scheme" content="light dark">

  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
  <link rel="stylesheet" href="chrome://resources/chromeos/colors/cros_styles.css">
  <link rel="stylesheet" href="chrome://theme/colors.css?sets=legacy,sys">
  <style>
    body {
      background-color: var(--cros-bg-color);
      color: var(--cros-text-color-primary);
    }

    xf-tree {
      width: 300px;
    }

    .trailing-icon {
      box-sizing: border-box;
      padding: 5px 0 0 5px;
    }

    .container {
      display: flex;
      justify-content: space-around;
    }

    xf-tree:not(:defined) {
      display: none;
    }

    xf-tree:defined {
      display: block;
    }

    .icons {
      display: flex;
      flex-wrap: wrap;
      width: 900px;
    }

    .icon-wrapper {
      display: flex;
      justify-content: space-between;
      margin-inline-end: 20px;
      width: 200px;
    }

    .widget-title {
      text-decoration: underline;
    }

  </style>

  <script type="module" src="./main.js"></script>
</head>

<body>
  <h1>Files app Labs</h1>
  <div class="container">
    <div theme="legacy">
      <h2>Legacy</h2>

      <h3 class="widget-title">Breadcrumb</h3>
      <xf-breadcrumb path="My Files/Downloads"></xf-breadcrumb>
      <xf-breadcrumb path="My Files/Downloads/AAA/BBB/CCC"></xf-breadcrumb>

      <h3 class="widget-title">Tree</h3>
      <xf-tree>
        <xf-tree-item label="Level 1 (2 children)" icon="my_files">
          <xf-tree-item label="Level 1.1 (2 children)" icon="downloads">
            <xf-tree-item label="Level 1.1.1 (no children)" selected icon="camera-folder"></xf-tree-item>
            <xf-tree-item label="Level 1.1.2 (no children)" disabled icon="usb"></xf-tree-item>
          </xf-tree-item>
          <xf-tree-item label="Level 1.2 (no children)" icon="folder"></xf-tree-item>
        </xf-tree-item>
        <xf-tree-item label="Level 2 (may have children)" may-have-children separator icon="smb"></xf-tree-item>
        <xf-tree-item label="Level 3 (no children)">
          <span class="trailing-icon" tabindex="0" slot="trailingIcon">X</span>
        </xf-tree-item>
      </xf-tree>
    </div>

    <div theme="refresh23">
      <h2>Refresh23</h2>

      <h3 class="widget-title">Breadcrumb</h3>
      <xf-breadcrumb path="My Files/Downloads"></xf-breadcrumb>
      <xf-breadcrumb path="My Files/Downloads/AAA/BBB/CCC"></xf-breadcrumb>

      <h3 class="widget-title">Tree</h3>
      <xf-tree>
        <xf-tree-item label="Level 1 (2 children)" icon="my_files">
          <xf-tree-item label="Level 1.1 (2 children)" icon="downloads">
            <xf-tree-item label="Level 1.1.1 (no children)" selected icon="camera-folder"></xf-tree-item>
            <xf-tree-item label="Level 1.1.2 (no children)" disabled icon="usb"></xf-tree-item>
          </xf-tree-item>
          <xf-tree-item label="Level 1.2 (no children)" icon="folder"></xf-tree-item>
        </xf-tree-item>
        <xf-tree-item label="Level 2 (may have children)" may-have-children separator icon="smb"></xf-tree-item>
        <xf-tree-item label="Level 3 (no children)" icon="invalid_type">
          <span class="trailing-icon" tabindex="0" slot="trailingIcon">X</span>
        </xf-tree-item>
      </xf-tree>
    </div>
  </div>

  <h2 class="widget">Icons</h2>
  <div class="icons">
    <div class="icon-wrapper">
      <span>type="android_files"</span>
      <xf-icon type="android_files"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="archive"</span>
      <xf-icon type="archive"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="audio"</span>
      <xf-icon type="audio"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="bruschetta"</span>
      <xf-icon type="bruschetta"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="camera-folder"</span>
      <xf-icon type="camera-folder"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="computer"</span>
      <xf-icon type="computer"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="computers_grand_root"</span>
      <xf-icon type="computers_grand_root"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="crostini"</span>
      <xf-icon type="crostini"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="downloads"</span>
      <xf-icon type="downloads"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="drive_offline"</span>
      <xf-icon type="drive_offline"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="drive_recent"</span>
      <xf-icon type="drive_recent"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="drive_shared_with_me"</span>
      <xf-icon type="drive_shared_with_me"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="drive"</span>
      <xf-icon type="drive"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="excel"</span>
      <xf-icon type="excel"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="external_media"</span>
      <xf-icon type="external_media"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="folder"</span>
      <xf-icon type="folder"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="generic"</span>
      <xf-icon type="generic"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="gdoc"</span>
      <xf-icon type="gdoc"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="gdraw"</span>
      <xf-icon type="gdraw"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="gform"</span>
      <xf-icon type="gform"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="glink"</span>
      <xf-icon type="glink"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="gmap"</span>
      <xf-icon type="gmap"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="gsheet"</span>
      <xf-icon type="gsheet"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="gsite"</span>
      <xf-icon type="gsite"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="gslides"</span>
      <xf-icon type="gslides"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="gtable"</span>
      <xf-icon type="gtable"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="image"</span>
      <xf-icon type="image"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="mtp"</span>
      <xf-icon type="mtp"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="my_files"</span>
      <xf-icon type="my_files"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="optical"</span>
      <xf-icon type="optical"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="pdf"</span>
      <xf-icon type="pdf"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="plugin_vm"</span>
      <xf-icon type="plugin_vm"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="ppt"</span>
      <xf-icon type="ppt"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="raw"</span>
      <xf-icon type="raw"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="recent"</span>
      <xf-icon type="recent"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="removable"</span>
      <xf-icon type="removable"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="script"</span>
      <xf-icon type="script"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="sd"</span>
      <xf-icon type="sd"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="service_drive"</span>
      <xf-icon type="service_drive"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="shared_drive"</span>
      <xf-icon type="shared_drive"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="shared_drives_grand_root"</span>
      <xf-icon type="shared_drives_grand_root"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="shared_folder"</span>
      <xf-icon type="shared_folder"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="shortcut"</span>
      <xf-icon type="shortcut"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="sites"</span>
      <xf-icon type="sites"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="smb"</span>
      <xf-icon type="smb"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="team_drive"</span>
      <xf-icon type="team_drive"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="thumbnail_generic"</span>
      <xf-icon type="thumbnail_generic"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="tini"</span>
      <xf-icon type="tini"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="trash"</span>
      <xf-icon type="trash"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="unknown_removable"</span>
      <xf-icon type="unknown_removable"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="usb"</span>
      <xf-icon type="usb"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="video"</span>
      <xf-icon type="video"></xf-icon>
    </div>
    <div class="icon-wrapper">
      <span>type="word"</span>
      <xf-icon type="word"></xf-icon>
    </div>
  </div>
</body>

</html>
